<template>
    <a-form :form="form" @submit="handleSubmit">
        <div style="margin: 20px auto; padding: 5px 0;background-color: #f6f6f6;text-align: center;">
            <a-avatar :src="user['portrait']" />
            <span style="margin-left: 10px;">Hi,{{ user['username'] }}！欢迎来到{{ $store.getters.getWebsiteName }}~</span>
        </div>
        <!-- 用户名 -->
        <a-form-item>
            <a-input size="large" type="text" placeholder="请输入手机号码" autocomplete="off"
                     v-decorator="[
                        'username',
                        { rules: [
                            { required: true, message: '请输入手机号码' },
                            { pattern: /^1([3456789])\d{9}$/,message: '请输入正确的手机号码' }
                        ]}
                    ]">
                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <!-- 密码 -->
        <a-form-item>
            <a-input size="large" type="password" autocomplete="off" placeholder="请输入密码"
                     v-decorator="[
                        'password',
                        {rules: [{ required: true, message: '请输入密码' }]}
                    ]">
                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <!-- 登陆按钮 -->
        <a-form-item>
            <a-button size="large" type="primary" htmlType="submit" block>立刻绑定</a-button>
        </a-form-item>
    </a-form>
</template>

<script>
    import { binding } from "@/apis/upms";

    export default {
        data(){
            return {
                form : this.$form.createForm(this),
            };
        },
        props : {
            user : { type : Object,required : true },
            callback : { type : String, required : true }
        },
        methods : {
            //  提交表单
            handleSubmit : function(e) {
                e.preventDefault();
                let $this = this;
                $this.form.validateFields((err, params) => {
                    if (!err){
                        params['openId'] = $this.user['id'];
                        //
                        binding(params).then(res => {
                            //  保存访问令牌
                            $this.$store.commit('setAccessToken',res.data);
                            //  回到登陆前要访问的页面
                            $this.$router.push({ path : $this.callback }).then();
                        });
                    }
                });
            }
        }
    };
</script>
